<template>
  <div class="daping">
    <div class="header">大屏演示</div>
    <div class="data_content">
      <mapEchart class="mid">地图</mapEchart>
      <leftDiv class="left"></leftDiv>
      <rightDiv class="right"></rightDiv>
    </div>
  </div>
</template>
<script>
import leftDiv from "./leftDiv.vue";
import rightDiv from "./rightDiv.vue";
import mapEchart from "./mainDiv.vue";
export default {
  components: { leftDiv, rightDiv, mapEchart },
  data() {
    return {};
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.daping {
  background: url(./img/true.png) no-repeat;
}
/* 头部 */
.header {
  width: 100%;
  height: 80px;
  /* padding: 0 20px; */
  /* min-width: 1366px; */
}
.data_content {
  /* min-width: 1366px; */
  padding-top: 20px;
  padding-bottom: 20px;

  display: flex;
  justify-content: space-between;
}
/*  */
.left,
.right {
  width: 400px;
  border: 1px solid #3678ca;
}
.mid {
  /* background-color: red; */
  width: calc(100% - 400px);
  order: 1;
  border: 1px solid #3678ca;
}
.left {
  order: 0;
}
.right {
  order: 2;
}
/* 边框 */
/* .corner {
  position: absolute;
  background-color: transparent;
}
.corner-left-top {
  left: -1px;
  top: -1px;
  border-right: transparent !important;
  border-bottom: transparent !important;
}
.corner-right-top {
  right: -1px;
  top: -1px;
  border-left: transparent !important;
  border-bottom: transparent !important;
}
.corner-left-bottom {
  left: -1px;
  bottom: -1px;
  border-right: transparent !important;
  border-top: transparent !important;
}
.corner-right-bottom {
  right: -1px;
  bottom: -1px;
  border-left: transparent !important;
  border-top: transparent !important;
} */
</style>